<template>
	<view class="message-page">
		<u-navbar :placeholder="true" leftIconColor="#fff">
			<view class="u-nav-slot both-center" slot="center">
				<view class="title">
					动态
				</view>
			</view>
			<view class="u-nav-slot relative" slot="right" v-if="hasLogin">
				<view class="aboutme  space-between">
					<view class="hor-center">
						<u-icon name="email" size="24" :bold="true" color="#878787"></u-icon>
						<span>与我相关</span>
					</view>
					<u-badge :isDot="true" :absolute="true" type="warning" :offset="[0,0]"></u-badge>
				</view>
			</view>
		</u-navbar>
		<view class="system-msg space-between">
			<view class="headimg hor-center">
				<u-icon name="bell-fill" color="#6fc4ad" size="16"></u-icon>
			</view>
			<view class="col full">
				<view class="space-between relative">
					<view class="sysmsg-left">
						系统消息
					</view>
					<view class="sysmsg-right" v-if="hasLogin">
						<u-badge :isDot="true" :absolute="true" type="warning" :offset="[8,15]"></u-badge>
						<u-icon name="arrow-right" size="" color=""></u-icon>
					</view>
				</view>
				<view class="content-text">
					<u-text :lines="1"
						text="您好, 欢迎加入[云端书馆], 希望大家在............111111111111111115555555555533333.............."
						color="#000" size="13"></u-text>
				</view>
				<view class="card-bottom hor-center space-between">
					<view class="time">
						昨天 21:40
					</view>
					<view class="msgsrc">
						刘荣日志
					</view>
				</view>
			</view>
		</view>
		<view v-for="(item,index) in msglist" :key="index">
			<MsgCard :msgdata="item" />
		</view>
	</view>
</template>

<script>
	import MsgCard from '@/components/msg-card/msg-card.vue'
	import {
		mapState
	} from 'vuex'
	export default {
		components: {
			MsgCard
		},
		computed: {
			...mapState(['hasLogin'])
		},
		data() {
			return {
				albumWidth: 0,
				msglist: [{
					username: '测试用户',
					content: '山不在高，有仙则名。水不在深，有龙则灵。斯是陋室，惟吾德馨。苔痕上阶绿，草色入帘青。谈笑有鸿儒，往来无白丁。可以调素琴，阅金经。无丝竹之乱耳，无案牍之劳形。南阳诸葛庐，西蜀子云亭。孔子云：何陋之有？',
					filename: '',
					date: 'xx几分钟前',
					resource: '旁友圈 [PPT学习]',
					urls2: [
						'https://img2.baidu.com/it/u=4275878202,4024270494&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
						// 'https://img0.baidu.com/it/u=1336331950,1548724862&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
						// 'https://img0.baidu.com/it/u=764288424,2975590343&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
						// 'https://img2.baidu.com/it/u=2176319346,3147073138&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
						// 'https://img0.baidu.com/it/u=374761639,2127782042&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
						// 'https://cdn.uviewui.com/uview/album/6.jpg',
						// 'https://cdn.uviewui.com/uview/album/7.jpg',
						// 'https://cdn.uviewui.com/uview/album/8.jpg',
						// 'https://cdn.uviewui.com/uview/album/9.jpg',
						// 'https://cdn.uviewui.com/uview/album/10.jpg',
					]
				}, {
					username: '测试用户',
					content: '山不在高，有仙则名。水不在深，有龙则灵。斯是陋室，惟吾德馨。苔痕上阶绿，草色入帘青。谈笑有鸿儒，往来无白丁。可以调素琴，阅金经。无丝竹之乱耳，无案牍之劳形。南阳诸葛庐，西蜀子云亭。孔子云：何陋之有？',
					filename: '02-37: 组织架构图（连接线其实挺细致；横...圆圈组成）.pptx',
					date: 'xx几分钟前',
					resource: '旁友圈 [PPT学习]',
					urls2: [
						// 'https://img2.baidu.com/it/u=4275878202,4024270494&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
						// 'https://img0.baidu.com/it/u=1336331950,1548724862&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
						// 'https://img0.baidu.com/it/u=764288424,2975590343&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
						'https://img2.baidu.com/it/u=2176319346,3147073138&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
						'https://img0.baidu.com/it/u=374761639,2127782042&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
						'https://cdn.uviewui.com/uview/album/6.jpg',
						// 'https://cdn.uviewui.com/uview/album/7.jpg',
						// 'https://cdn.uviewui.com/uview/album/8.jpg',
						// 'https://cdn.uviewui.com/uview/album/9.jpg',
						// 'https://cdn.uviewui.com/uview/album/10.jpg',
					],
				}, {
					username: '测试用户',
					content: '山不在高，有仙则名。水不在深，有龙则灵。斯是陋室，惟吾德馨。',
					filename: '第二学期第37期模仿训练.pptx',
					date: 'xx几分钟前',
					resource: '旁友圈 [PPT学习]',
					urls2: [
						// 'https://img2.baidu.com/it/u=4275878202,4024270494&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
						// 'https://img0.baidu.com/it/u=1336331950,1548724862&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
						// 'https://img0.baidu.com/it/u=764288424,2975590343&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
						// 'https://img2.baidu.com/it/u=2176319346,3147073138&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
						// 'https://img0.baidu.com/it/u=374761639,2127782042&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
						// 'https://cdn.uviewui.com/uview/album/6.jpg',
						'https://cdn.uviewui.com/uview/album/7.jpg',
						// 'https://cdn.uviewui.com/uview/album/8.jpg',
						'https://cdn.uviewui.com/uview/album/9.jpg',
						// 'https://cdn.uviewui.com/uview/album/10.jpg',
					],
				}]
			}
		},
	}
</script>

<style lang="scss" scoped>
	.message-page {
		padding: 0 16px;
	}

	.aboutme {
		font-size: 14px;
		border-radius: 2rem;
		padding: 0.25rem 0.6rem;
		background-color: #f5f5f5;
		color: #828282;

		span {
			margin-left: 1vw;
		}
	}

	.system-msg {
		padding: 2vh 0;
		border-bottom: 1px solid #ececec;
		
		.headimg {
			height: 1.5rem;
			padding: 0 6px;
			background-color: #ebf5f4;
			border-radius: 50%;
			margin-right: 2vw;
		}
	}

	.col {
		.sysmsg-left {
			font-size: 15px;
			// font-weight: 700;
			margin-top: 1vw;
		}

		.sysmsg-right {
			margin-top: 1vw;
		}

		.content-text {
			margin: 1vh 0;
		}

		.card-bottom {
			font-size: 12px;
			color: #9f9f9f;
		}
	}
</style>
